<template>
    <div>
        <!-- 页面容器 -->
        <div class="index-container">
            <TopSerch></TopSerch>
            <Banner></Banner>
            <Hot></Hot>
            <ArtExhibition></ArtExhibition>
            <PaintingRecommend></PaintingRecommend>
            <Author></Author>
            <div class="seat"></div>
            <Nav></Nav>
        </div>
        <!-- 访问vuex中的数据 -->
        <!-- vuex的数据,第一种访问方式:{{$store.state.count}} <br>
        第二种访问方式: {{ count }} -->
        <!-- 改变vuex中的数据 -->
        <!-- <button @click="add(2)">count+</button> -->
    </div>
</template>

<script>
// 组件中访问state中数据的第二种方式         
// 从vuex中按需导入mapState函数
import { mapState } from 'vuex';

// 触发Mutations的第二种方式
// 从vuex中按需导入mapMutations函数
import { mapMutations } from 'vuex';

// 导入组件
import TopSerch from '@/components/index/TopSerch.vue'
import Banner from '@/components/index/Banner.vue'
import Hot from '@/components/index/Hot.vue'
import Nav from '@/components/pub/Nav.vue'
import ArtExhibition from '@/components/index/ArtExhibition.vue'
import PaintingRecommend from '@/components/index/PaintingRecommend.vue'
import Author from '@/components/index/Author.vue';

export default {
    name: 'VueIndex',

    data() {
        return {

        };
    },
    components: {
        TopSerch,
        Banner,
        Hot,
        ArtExhibition,
        PaintingRecommend,
        Author,
        Nav,
    },
    computed: {
    },

    mounted() {

    },

    methods: {
    },
};
</script>

<style scoped>
@import '@/assets/css/index/index.min.css'
</style>